<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-tree :data="department"
             :props="defaultProps"
             @node-click="selectTree"
             >
    </el-tree>

    <el-button type="warning" style="position: absolute; left: 500px; top: 200px;" @click="dialogFormVisible = true">新增下级部门</el-button>
    <el-button type="danger" style="position: absolute; left: 700px; top: 200px;" @click="remove">删除该部门</el-button>
    <el-card class="box-card" style="width: 450px; margin: 180px auto; border-radius: 15px;box-shadow:0 0 5px 1px #999; ">
        <el-form :model="departmentObj" label-width="80px" >
            <el-form-item label="部门编号:">
                <el-input v-model="departmentObj.dno"></el-input>
            </el-form-item>
            <el-form-item label="部门名称:">
                <el-input v-model="departmentObj.dname"></el-input>
            </el-form-item>
            <el-form-item label="部门经理:">
                <el-input v-model="departmentObj.dmanager"></el-input>
            </el-form-item>
            <el-form-item label="联系电话:">
                <el-input v-model="departmentObj.dphone"></el-input>
            </el-form-item>
            <el-form-item label="固定电话:">
                <el-input v-model="departmentObj.dtel"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:">
                <el-input v-model="departmentObj.demail"></el-input>
            </el-form-item>

            <el-form-item label="部门简介:">
                <el-input v-model="departmentObj.dintro" type="textarea"></el-input>
            </el-form-item>

            <el-button type="primary" style="margin-left: 150px" @click="save">保存</el-button>
        </el-form>
    </el-card>


    <el-dialog title="增加下级部门" :visible.sync="dialogFormVisible">
        <el-form :model="department01" label-width="80px" >
            <el-form-item label="部门编号:">
                <el-input v-model="department01.dno"></el-input>
            </el-form-item>
            <el-form-item label="部门名称:">
                <el-input v-model="department01.dname"></el-input>
            </el-form-item>
            <el-form-item label="部门经理:">
                <el-input v-model="department01.dmanager"></el-input>
            </el-form-item>
            <el-form-item label="联系电话:">
                <el-input v-model="department01.dphone"></el-input>
            </el-form-item>
            <el-form-item label="固定电话:">
                <el-input v-model="department01.dtel"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:">
                <el-input v-model="department01.demail"></el-input>
            </el-form-item>
            <el-form-item label="部门简介:">
                <el-input v-model="department01.dintro" type="textarea"></el-input>
            </el-form-item>
            <el-button type="primary" style="margin-left: 150px" @click="add">保存</el-button>
        </el-form>
    </el-dialog>
</div>


   <script>
       new Vue({
           el:"#app",
           data() {
               return {
                   department: [],
                   defaultProps: {
                       children: 'departments',
                       label: 'dname'
                   },
                   departmentObj:{id:0},
                   department01:{id:"",pid:"",cid:"",dname:"",dno:"",dmanager:"",dphone:"",dtel:"",demail:"",dintro:""},
                   dialogFormVisible:false,
               }
           },
           methods: {
             loadDepartment(){
                 axios.get("/departments")
                     .then(res => {
                        this.department = res.data;
                     })
             },
               selectTree(data){
                   axios.get("/department/de/"+data.id)
                       .then(res => {
                          this.departmentObj = res.data;
                          console.log(this.departmentObj)
                       })
               },
               add(){
                 this.department01.pid = this.departmentObj.id;

                 console.log(this.department01);
                 axios.post("/insertDepart",this.department01)
                     .then(res => {
                         if (res.data == "ok"){
                             this.$message({
                                 message: '添加成功',
                                 type: 'success'
                             });
                         }
                         this.dialogFormVisible = false;
                         this.loadDepartment();
                         this.department01={id:"",pid:"",cid:"",dname:"",dno:"",dmanager:"",dphone:"",dtel:"",demail:"",dintro:""};
                     })
               },
               remove(){
                   axios.delete("/department/"+this.departmentObj.id)
                       .then(res =>{
                           if (res.data == "ok") {
                               this.$message({
                                   message: '删除成功!',
                                   type: 'success'
                               });
                               this.departmentObj={};
                               this.loadDepartment();
                           }
                       })
               },
               save(){
                 axios.put("/department",this.departmentObj)
                   .then(res =>{
                       if (res.data == "ok") {
                           this.$message({
                               message: '更新成功',
                               type: 'success'
                           });
                       }
                   })
               }
           },
           mounted(){
               this.loadDepartment();
           }
       })
   </script>
</body>
</html>